<template>
  <div class="FormBoControlRef" style="margin-right: 7px">

    <template v-if="getIsControl(value.control,'rx-address')">
      <a-row>
        <a-col :span="24">
          <a-form-item :label="i18n('form.province','省编码')">
            {{ value.name }}
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :label="i18n('form.provinceName','省名称')">
            <a-select :getPopupContainer='p=>p.parentNode' allowClear style="width: 100%;" :options="fieldDatas"
                      v-model="val.province"/>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="val.setting.isCity">
          <a-form-item :label="i18n('form.cityCode','市编码')">
            <a-select :getPopupContainer='p=>p.parentNode' allowClear style="width:100%;" :options="fieldDatas"
                      v-model="val.city_code"/>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="val.setting.isCity">
          <a-form-item :label="i18n('form.cityName','市名称')">
            <a-select :getPopupContainer='p=>p.parentNode' allowClear style="width:100%;" :options="fieldDatas"
                      v-model="val.city"/>
          </a-form-item>
        </a-col>

        <a-col :span="24" v-if="val.setting.isCounty">
          <a-form-item :label="i18n('form.countyCode','区(县)编码')">
            <a-select :getPopupContainer='p=>p.parentNode' allowClear style="width:100%;" :options="fieldDatas"
                      v-model="val.county_code"/>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="val.setting.isCounty">
          <a-form-item :label="i18n('form.countyName','区(县)名称')">
            <a-select :getPopupContainer='p=>p.parentNode' allowClear style="width:100%;" :options="fieldDatas"
                      v-model="val.county"/>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="val.setting.isAddress">
          <a-form-item :label="i18n('form.detailtAddress','详细地址')">
            <a-select :getPopupContainer='p=>p.parentNode' allowClear style="width:100%;" :options="fieldDatas"
                      v-model="val.address"/>
          </a-form-item>
        </a-col>
      </a-row>
    </template>
    <template v-else>
      <a-row>
        <a-col :span="24">
          <a-form-item :label="i18n('form.assoField','关联字段')">
            <a-select :getPopupContainer='p=>p.parentNode' allowClear style="width:190px;" v-model="val.ref">
              <a-select-option :title="field.comment" :value="field.fieldName" :key="field.fieldName"
                               v-for="field in fieldDatas">
                {{ field.comment }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

    </template>
  </div>
</template>

<script>
export default {
  name: "FormBoControlRef",
  props: ["value", "fieldDatas"],
  data() {
    return {
      val: {},
    }
  },
  created() {
    this.init();
  },
  methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"formIndexManager",key);
      },
    getIsControl(control, name) {
      if (control == name) {
        return true;
      }
      return false;
    },
    init() {
      for (var obj of this.fieldDatas) {
        this.$set(obj, 'label', obj.comment)
        this.$set(obj, 'value', obj.name)
      }
      var extJson = this.value.extJson;
      if (!extJson) {
        extJson = {};
      } else if (typeof extJson == 'string') {
        extJson = JSON.parse(extJson);
      }
      this.val = extJson;
    }
  },
  watch: {
    val: {
      handler: function (val) {
        this.value.extJson = val;
        this.$emit("input", this.value);
      },
      deep: true
    },
    value: {
      handler: function (val) {
        this.init();
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.FormBoControlRef >>> .ant-form-item {
  margin-bottom: 10px !important;
}

.FormBoConHead {
  margin-left: 20px;
  color: rgba(0, 0, 0, 0.85);
}
</style>